<script setup>
import ComputedAttr from '@/components/vueItem/ComputedAttr.vue';
import TeleportVue from '@/components/vueItem/TeleportVue.vue';
import { ref, shallowRef } from 'vue';
const activeComponent = shallowRef(null);
const activeIndex = ref(-1);
const modal = ref(false)
const componentsArr = shallowRef([
    {
        name: '计算属性',
        component: ComputedAttr
    },
    {
        name: 'Teleport',
        component: TeleportVue
    }
])
const changeComponent = (component, index) => {
    activeComponent.value = component;
    modal.value = true;
    activeIndex.value = index
}
</script>
<template>
    <ul class="component-list">
        <li v-for="item, index in componentsArr">
            <el-button type="primary" :plain="index != activeIndex" @click="changeComponent(item.component, index)">{{
                item.name }}</el-button>
        </li>
    </ul>
    <el-dialog v-model="modal" title="Warning" :fullscreen="true" align-center>
        <component :is="activeComponent" />
        <template #footer>
            <el-button @click="modal = false">Cancel</el-button>
        </template>
    </el-dialog>
</template>
<style lang="less" scoped>
.component-list {
    display: flex;
    flex-wrap: wrap;
    padding: 0;

    li {
        list-style: none;
        margin: 0 10px;

        .el-button {
            min-width: 150px;
        }
    }
}
</style>